/* 色相系 */
$fr-color-primary: #296BEF !default; // 主题色
$fr-color-success: #07C160 !default; // 绿
$fr-color-warning: #EDA20C !default; // 橙
$fr-color-danger: #D9514C !default;   // 红

/* 灰色系颜色 */
$fr-color-gray-1: #FAFAFA !default; // 灰 50
$fr-color-gray-2: #F0F0F0 !default; // 灰 100
$fr-color-gray-3: #EBEBEB !default; // 灰 200
$fr-color-gray-4: #E6E6E6 !default; // 灰 300
$fr-color-gray-5: #E0E0E0 !default; // 灰 400
$fr-color-gray-6: #D6D6D6 !default; // 灰 500
$fr-color-gray-7: #C7C7C7 !default; // 灰 600
$fr-color-gray-8: #A3A3A3 !default; // 灰 700
$fr-color-gray-9: #6B6B6B !default; // 灰 800
$fr-color-gray-10: #1F1F1F !default; // 灰 900

/* 黑白系颜色 */
$fr-color-white: #FFFFFF !default;
$fr-color-black: #000000 !default;

/* 文字尺寸 */
$fr-font-size-xs: 24rpx !default;
$fr-font-size-sm: 26rpx !default;
$fr-font-size-md: 28rpx !default;
$fr-font-size-lg: 32rpx !default;
$fr-font-size-xl: 36rpx !default;

/* 图片尺寸 */
$fr-image-size-xs: 28rpx !default;
$fr-image-size-sm: 34rpx !default;
$fr-image-size-md: 42rpx !default;
$fr-image-size-lg: 80rpx !default;
$fr-image-size-xl: 96rpx !default;

/* Border Radius */
$fr-border-radius-xs: 4px !default;
$fr-border-radius-sm: 8px !default;
$fr-border-radius-md: 12px !default;
$fr-border-radius-lg: 16px !default;
$fr-border-radius-xl: 24px !default;

/* 宽度 */
$fr-width-height-xs: 20% !default;
$fr-width-height-sm: 25% !default;
$fr-width-height-md: 33.33% !default;
$fr-width-height-lg: 50% !default;
$fr-width-height-xl: 100% !default;

/* 边距 */
$fr-margin-padding-xs: 8rpx !default;
$fr-margin-padding-sm: 16rpx !default;
$fr-margin-padding-md: 24rpx !default;
$fr-margin-padding-lg: 32rpx !default;
$fr-margin-padding-xl: 40rpx !default;

/* 主题色 */
$fr-color-primary-light-1: mix($fr-color-white, $fr-color-primary, 10%);
$fr-color-primary-light-2: mix($fr-color-white, $fr-color-primary, 20%);
$fr-color-primary-light-3: mix($fr-color-white, $fr-color-primary, 30%);
$fr-color-primary-light-4: mix($fr-color-white, $fr-color-primary, 40%);
$fr-color-primary-light-5: mix($fr-color-white, $fr-color-primary, 50%);
$fr-color-primary-light-6: mix($fr-color-white, $fr-color-primary, 60%);
$fr-color-primary-light-7: mix($fr-color-white, $fr-color-primary, 70%);
$fr-color-primary-light-8: mix($fr-color-white, $fr-color-primary, 80%);
$fr-color-primary-light-9: mix($fr-color-white, $fr-color-primary, 90%);
/* 绿色 */
$fr-color-success-light-1: mix($fr-color-white, $fr-color-success, 10%);
$fr-color-success-light-2: mix($fr-color-white, $fr-color-success, 20%);
$fr-color-success-light-3: mix($fr-color-white, $fr-color-success, 30%);
$fr-color-success-light-4: mix($fr-color-white, $fr-color-success, 40%);
$fr-color-success-light-5: mix($fr-color-white, $fr-color-success, 50%);
$fr-color-success-light-6: mix($fr-color-white, $fr-color-success, 60%);
$fr-color-success-light-7: mix($fr-color-white, $fr-color-success, 70%);
$fr-color-success-light-8: mix($fr-color-white, $fr-color-success, 80%);
$fr-color-success-light-9: mix($fr-color-white, $fr-color-success, 90%);
/* 橙色 */
$fr-color-warning-light-1: mix($fr-color-white, $fr-color-warning, 10%);
$fr-color-warning-light-2: mix($fr-color-white, $fr-color-warning, 20%);
$fr-color-warning-light-3: mix($fr-color-white, $fr-color-warning, 30%);
$fr-color-warning-light-4: mix($fr-color-white, $fr-color-warning, 40%);
$fr-color-warning-light-5: mix($fr-color-white, $fr-color-warning, 50%);
$fr-color-warning-light-6: mix($fr-color-white, $fr-color-warning, 60%);
$fr-color-warning-light-7: mix($fr-color-white, $fr-color-warning, 70%);
$fr-color-warning-light-8: mix($fr-color-white, $fr-color-warning, 80%);
$fr-color-warning-light-9: mix($fr-color-white, $fr-color-warning, 90%);
/* 红色 */
$fr-color-danger-light-1: mix($fr-color-white, $fr-color-danger, 10%);
$fr-color-danger-light-2: mix($fr-color-white, $fr-color-danger, 20%);
$fr-color-danger-light-3: mix($fr-color-white, $fr-color-danger, 30%);
$fr-color-danger-light-4: mix($fr-color-white, $fr-color-danger, 40%);
$fr-color-danger-light-5: mix($fr-color-white, $fr-color-danger, 50%);
$fr-color-danger-light-6: mix($fr-color-white, $fr-color-danger, 60%);
$fr-color-danger-light-7: mix($fr-color-white, $fr-color-danger, 70%);
$fr-color-danger-light-8: mix($fr-color-white, $fr-color-danger, 80%);
$fr-color-danger-light-9: mix($fr-color-white, $fr-color-danger, 90%);